<template>
	<view>
		<view class="tab">
			<view
				:style="{paddingTop:`${(menu.top - system.statusBarHeight) * 2 + menu.height*3}rpx`,marginLeft:'30rpx'}"
				@click="goBack">
				<u-icon name="arrow-left" size="20" color="#000"></u-icon>
			</view>
			<!-- <view class="lanu">
				<u-tabs :list="tabList" @click="tabclick" :current="currents" lineColor="#EF6332"></u-tabs>
			</view> -->
			<view class="" style="display: flex;justify-content: space-around;margin-top: 50rpx;">
				<view class="" style="display: flex;">
					{{addressName}}
				</view>
				<view class="">
					<input type="text" placeholder="搜店铺 搜商品" />
				</view>
			</view>
		</view>
<!-- 		<view class="" style="display: flex;justify-content: space-around;"> 
			<view class="root">

			</view>
			
			
			
		</view> -->
		<filter-select @tabClick="selectClick">
			
		</filter-select>
		
		
		<view class="content">
			<view class="zonghezi" v-for="(item,index) in dianpu" :key="index" v-if="dianpu !=''" @click="goshopDetails(item)">
				<view class="" style="width: 28%;">
					<image style="width: 100%;height: 200rpx;" :src="item.image" mode=""></image>
				</view>
				<view class="" style="width: 65%;">
					<view class="" style="width: 100%;display: flex;justify-content: space-between;padding-top: 10rpx;">
						<view class=""
							style="background-color: orangered;color: #fff;border-radius: 10rpx;padding: 5rpx;font-size: 22rpx;">
							29分钟超时赔付
						</view>
						<view v-if="item.is_open == 0" class="" style="border: 1rpx solid #f18f00;padding: 5rpx;color: #f18f00;border-radius: 10rpx;font-size: 22rpx;">
							暂停营业
						</view>
						<view v-if="item.is_open == null" class="" style="border: 1rpx solid #f18f00;padding: 5rpx;color: #f18f00;border-radius: 10rpx;font-size: 22rpx;">
							暂停营业
						</view>
						<view v-if="item.is_open == 1" class="" style="border: 1rpx solid #f18f00;padding: 5rpx;color: #f18f00;border-radius: 10rpx;font-size: 22rpx;">
							营业中
						</view>
					</view>
					<view class=""
						style="width: 100%;padding: 5rpx; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; ">
						{{item.store_name}}
					</view>
					<view class="" style="display: flex;align-items: center;font-size: 30rpx;margin-top: 10rpx;">

						<u-rate :count="5" :value="3" size="15"></u-rate>
						<text style="font-size: 22rpx;color: #999999;">10公里内10元起送</text>
					</view>
					<view class="" style="margin-top: 20rpx;font-size: 26rpx;color: #999;font-size: 22rpx;">
						{{item.address}}
					</view>
					<!-- <view class="" style="display: flex;width: 100%;overflow-x: scroll;">
						<view class="" style="text-align: center;margin: 20rpx;">
							<image style="width: 135rpx;height: 135rpx;border-radius: 10rpx;" src="../../static/toux.jpg" mode=""></image>
							<view class="" style="font-size: 22rpx;">
								玉米猪肉饺子
							</view>
							<view class="">
								￥10.08
							</view>
						</view>
						
					</view> -->

				</view>

			</view>
			
			
			<view class="" v-if="dianpu == ''">
				<u-empty
				        mode="data"
				        icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty>
			</view>
			
			

			<view class="line"></view>
		</view>
	</view>
</template>

<script>
	export default {
		mounted() {
				this.$req('GET',this.$api.fenLlist,{}).then(res =>{
					let lists = res.data.list.map((item)=>{
						return {
							value:item.id,
							text:item.title
						}
					})
					this.$set(this.filterData[1],"options",lists)
					console.log(this.filterData,'查看这个filterData插入成功没有')
				})
			
		},
		data() {
			return {
				system: null,
				menu: null,
				tabList: [
					
				],
				currents:'',
				lists:[],
				storeList:[],
				fenleiId:'',
				dianpu:[],
				addressName:'',
				filterData:[
					[{ text: '全部状态', value: '' }, { text: '离我最近', value: 1 }, { text: '评价最高', value: 2 }, { text: '状态3', value: 3 }],
					[{ text: '全部类型', value: '' }, { text: '类型1', value: 1 }, { text: '类型2', value: 2 }, { text: '类型3', value: 3 }]
				],
				defaultIndex:[0,0],
				good_type:'',
			}
		},
		methods: {
			selectClick(item) {
				console.log(item,'itemsssssssss')
				if(item.id == 1){
					this.$req('GET', this.$api.dianpuList, {
						school_id:uni.getStorageSync('addressId'),
						cate_id: item.item_id,
						user_id:uni.getStorageSync('userId'),
						lat:uni.getStorageSync('jingdu'),
						lng:uni.getStorageSync('weidu')
					}).then(res => {
						console.log(res, '查看打印的res')
						this.dianpu = res.data.info.data
						console.log(this.dianpu, '打印店铺看看')
					
					
					})
				}else if(item.id == 2){
					this.good_type =item.item_id
					this.$req('GET', this.$api.dianpuList, {
						school_id:uni.getStorageSync('addressId'),
						// cate_id: uni.getStorageSync('fenlei'),
						type:this.good_type,
						user_id:uni.getStorageSync('userId'),
						lat:uni.getStorageSync('jingdu'),
						lng:uni.getStorageSync('weidu')
					}).then(res => {
						console.log(res, '查看打印的res')
						this.dianpu = res.data.info.data
						console.log(this.dianpu, '打印店铺看看')
					
					
					})
				}
			},
			tabclick(item) {
				this.fenleiId = item.id
				this.getStoreList()
			},
			goBack() {
				uni.navigateBack()
			},
			getFenList() {
				this.$req('GET', this.$api.fenLlist, {}).then(res => {
			
					// this.lists = res.data.list.map(item => ({ name: item.title }));
					this.lists = res.data.list
					this.tabList = this.lists.map(item => ({text: item.title,value:item.id}))
					this.filterData[0] = this.tabList;
					console.log(this.filterData[0], '查看分类列表')
			
				})
			},
			// 获取店铺列表
			getStoreList(){
				this.$req('GET', this.$api.dianpuList, {
					school_id:uni.getStorageSync('addressId'),
					cate_id: this.fenleiId,
					user_id:uni.getStorageSync('userId')
				}).then(res => {
					console.log(res, '查看打印的res')
					this.dianpu = res.data.info.data
					console.log(this.dianpu, '打印店铺看看')
				
				
				})
			},
			// goshopDetail(item) {
			// 	uni.navigateTo({
			// 		url: `/shopDetail-pkg/shopDetail/shopDetail?id=${item.id}&value=${this.value}&count=${this.count}&title=${item.store_name}&is_collect=${item.is_collect}`
			// 	})
			// },
			goshopDetails(item){
				uni.navigateTo({
					url: `/shopDetail-pkg/shopDetail/shopDetail?id=${item.id}&value=${this.value}&count=${this.count}&title=${item.store_name}&is_collect=${item.is_collect}`
				})
			},
			ed(res){
				console.log(res)
			},
			dateChange(d){
			   uni.showToast({
				   icon:'none',
				   title:d
			   })
			}
			
			
		},
		onLoad(option) {
			console.log(option,'查看打印的option')
			uni.getSystemInfo({
				success: res => {
					this.system = res
				}
			})
			this.menu = uni.getMenuButtonBoundingClientRect()
			this.currents = option.index
			this.fenleiId = option.id
			
		},
		onShow() {
			this.getFenList()
			this.getStoreList()
			this.addressName = uni.getStorageSync('otherAddress')
			console.log(this.addressName,'this.addressName')
		}
	}
</script>

<style scoped>
	.line {
		height: 8rpx;
		background-color: #f4f4f5;
	}

	.zonghezi {
		margin: 20rpx auto;
		width: 90%;
		display: flex;
		justify-content: space-around;
		border-radius: 15rpx;
		margin-top: 35rpx;
	}

	.lanu {
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.tab {
		height: 250rpx;
		/* background: linear-gradient(to bottom, #ffc469, #ffdba4); */
	}
</style>